import React from "react";
// import router from "umi/router";
// import Cookies from "js-cookie";
// import { Dropdown, Avatar, Menu, Icon, Layout, Divider } from "antd";
import { Dropdown, Avatar, Menu, Icon, Layout } from "antd";
import admin from "../../assets/images/admin.png";
import BaseBreadcrumb, {
  menuData2BreadcrumbData,
} from "../breadcrumb/BaseBreadcrumb";
import styles from "./TopHeader.less";
import TopNotice from "../topnotice";

const { Header } = Layout;

const TopHeader = ({
  collapsed,
  onCollapse,
  dispatch,
  location,
  data,
  onMenuItemClick,
  // appListMenu,
  noticeData = {},
  msgTypes = [],
}) => {
  // const entId = sessionStorage.getItem("entId");
  // if (!entId) {
  //   router.push("/login");
  // }
  // console.log(appListMenu.appList)
  // const { appListAll = [] } = appListMenu;
  const onMenuClick = () => {
    // sessionStorage.setItem("TAOAN", "未登录");
    // sessionStorage.removeItem("userId");
    // sessionStorage.removeItem("entId");
    dispatch({ type: "Public/logout4A" }).then(
      res => {
        // console.log(res)
        if (res.success =true) {
          // router.push(res.data.logoutUrl)
          // window.location.href = `${res.data.logoutUrl}`
          window.location.reload(true);
        }
      }
    );
    // dispatch({ type: "setStatus", payload: false });
    // dispatch({ type: "setLoading", payload: false });
    // Cookies.remove("userId");
    // router.push("/login");
  };

  /*
  const onAppMenuClick = (e) => {
    dispatch({
      type: "appListMenu/focusApp", payload: {
        id: e.key,
        name: e.item.props.value,
      },
    })
    Cookies.set("APPID", e.key);
    // dispatch({
    //   type: "appListMenu/getAppListData",
    // })
    // dispatch({
    //   type: "appListMenu/appSwitch",
    //   payload: {
    //     appId: e.key,
    //   },
    // }).then(
    //   setTimeout(() => {
    //     dispatch({
    //       type: "appListMenu/getAppListData",
    //     })
    //   }, 2000)
    // )
  };
  */
  const menu = (
    <Menu className={styles.menu} onClick={onMenuClick}>
      <Menu.Item key="logout" className={styles.logout}>
        <Icon type="logout" />
        退出登录
      </Menu.Item>
    </Menu>
  );
  /*
  const appMenu = (
    <Menu onClick={onAppMenuClick}>
      {appListMenu.appListAll.map((item) => (
        <Menu.Item key={item.id} value={item.name} className={styles.menuItem}>
          <span className={`${item.id}` === `${appListMenu.focusApp.id}` ? styles.active_item : ''}>{item.name}</span>
          <span>{`${item.id}` === `${appListMenu.focusApp.id}` ? <Icon type="check" /> : null}</span>
        </Menu.Item>
      ))}
    </Menu>
  );
  */
  const breadcrumbData = menuData2BreadcrumbData(data, location.pathname);
  return (
    <Header className={styles.root}>
      <div className={styles.left}>
        {/* <div className={styles.logo}>...</div> */}
        <div className={styles.trigger} onClick={onCollapse}>
          <Icon
            type={collapsed ? "menu-unfold" : "menu-fold"}
          />
        </div>
        <BaseBreadcrumb
          className={styles.Breadcrumb}
          data={breadcrumbData}
          onMenuItemClick={onMenuItemClick}
        />
      </div>
      <div className={styles.right}>
        {/* (appListAll && appListAll.length > 0) && (
          <React.Fragment>
            <div className={`${styles.item} ${styles.ptop2}`}>
              <Dropdown overlay={appMenu} overlayClassName={styles.overlay_dropdown}>
                <span>
                  <span style={{ marginRight: 7, fontSize: 14 }}>{appListMenu.focusApp.name || ""}</span>
                  <Icon className={styles.down_icon} type="caret-down" />
                </span>
              </Dropdown>
            </div>
            <div className={styles.ptop2}>
              <Divider type="vertical" />
            </div>
          </React.Fragment>
        ) */}
        <div className={`${styles.item} ${styles.ptop2}`}>
          <TopNotice
            dispatch={dispatch}
            noticeData={noticeData}
            msgTypes={msgTypes}
          />
        </div>
        {/* <Divider type="vertical" /> */}
        <div className={styles.item}>
          <Dropdown overlay={menu} trigger={["click"]}>
            <span className={styles.userBox}>
              <Avatar
                // style={{ backgroundColor: "#87d068" }}
                className={styles.img}
                src={admin}
              />
              <span className={styles.name}>
                {sessionStorage.getItem("USER_NAME") || '未登录'}
              </span>
            </span>
          </Dropdown>
        </div>
      </div>
    </Header>
  );
};

export default TopHeader;
